<template>
    <div class="newsinfo_container">
        <h3 class="title">{{info.titile}}</h3>
        <p class="subtitle">
            <span>发表时间：{{info.add_time}}</span>
            <span>点击：{{info.click}}次</span>
        </p>      
        <hr>
        <p v-html="info.txt"></p>

        <!-- 这是评论区 的子组件 -->
        <comment-box :id="this.id"></comment-box>
    </div>
</template>
<style lang="scss" scoped>
.newsinfo_container{      
    padding:0 15px;
    .subtitle{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size:12px;
        color: #226aff
    }
    .title{
        color:red;
        font-size:16px;
        text-align: center;
        margin:10px 0
        
    }   
}

</style>
<script>
import { Toast } from "mint-ui";
import comment from "../subcomponents/comment.vue";
export default {
    data(){
        return {
            id:this.$route.params.id,//将url传递过来的ID值挂在到data上方便以后调用；
            info:{}
        }
    },
    methods:{
        getInfo(){
            var that = this;
            
            that.$http.get('../../data/newsinfo.json').then(res=>{
                
                var list = res.body;
                // console.log(list)
                list.forEach(function(item){
                    console.log(item.id,that.id,that.id === item.id)
                    if(that.id === item.id){
                        that.info = item;
                        console.log(that.info)
                    }
                    
                })
            })
        }
    },
    components:{
            'comment-box':comment
    },
    created(){
        this.getInfo()
    }
}
</script>